<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <style type="text/css">
            .shopping-cart {
                border: 1px solid #dedede ;
            }

            .cart-item {
                display: flex;
                margin: 0 10px;
                border-bottom: 1px solid #dedede;
                line-height: 30px;
            }

            .cart-item>* {
                flex-basis: 20%;
                text-align: center;
            }

            .total {
                display: flex;
                margin: 0 10px;
                line-height: 30px;
            }

            .total>span {
                margin-left: 80%;
                flex-basis: 20%;
                text-align: center;
            }

        </style>
    </head>
    <body>

        <div id="root"></div>

         <!-- 导入 vue.js 3.x 核心库 -->
         <script src="../scripts/vue@3.2.31.js"></script>

         <script src="./vue3-shopping-cart.js"></script>
        
    </body>
</html>